@(products:ArrayList[Product])
@main("CRUD application") {

<h2> All products</h2>

<script>
function del(urlToDelete) {
$.ajax({
url: urlToDelete,
type: 'DELETE',
success: function(results) {
// Refresh the page
location.reload();
}
});
}
</script>

<table class="table table-striped">
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Description</th>
</tr>
</thead>
<tbody>
@for(product <- products) {
<tr>
<td><a href="@routes.Products.show(product.productId)">
@product.productId
</a></td>
<td>@product.productName</td>
<td>@product.productDescription</td>
<td><a class="btn" href="@routes.Products.edit(product.productId)">edit</a></td>
<td><button onclick="del('@routes.Products.delete(product.productId)')">delete</button></td>
}
</tbody>
</table>

<a class="btn" href="@routes.Products.add()">+ New Product</a>
}